<template>
    <div class="uploading">

        <div id="content">
            <!--S进度条-->
            <div id="uploading"></div>
            <!--E进度条-->

            <!--S已上传-->
            <div class="uploaded">
                已上传:{{uploaded}} / {{number}}
            </div>
            <!--E已上传-->

            <!--S提示-->
            <div class="hint">
                上传中，请勿关闭网页
            </div>
            <!--E提示-->

            <!--S失败-->
            <div class="error" v-if="errors.length > 0">

                <h3>上传失败:{{errors.length}} </h3>

                <div class="errors" v-for="(item,index) in errors" :key="index">
                    <p>{{item}}</p>
                </div>
            </div>
            <!--E失败-->

        </div>

    </div>
</template>

<script>
import ProgressBar from 'progressbar.js'
export default {
    name: "uploading",
    data () {
        return {
            // 进度条对象
            Progress: null
        }
    },
    props: {
      // 文件上传数量
      number: {
          type: Number,
          default:10
      },
      // 已经上传的数量
      uploaded: {
          type: Number,
          default:0
      },
      // 上传失败信息
      errors: {
          type: Array,
          default() {
              return []
          }
      },
      // 进度总数
      total: {
          type: Number,
          default:10
      },
      // 当前进度
      value: {
          type: Number,
          default:0
      }
    },
    watch: {
      value (value) {
          this.Progress.animate(value / this.total)
      }
    },
    mounted() {
        this.Progress = new ProgressBar.Line('#uploading',{
            strokeWidth: 3,
            color: '#3AADFC'
        })
        this.Progress.animate(this.value)
    }
}
</script>

<style scoped lang="less" src="./uploading.less"></style>
